<template>
	<view class="page-container">
		<!-- 蓝色背景区域 -->
		<view class="header-bg"></view>

		<!-- 悬浮内容区域 -->
		<view class="content-container">
			<!-- 优惠券列表 -->
			<view class="coupon-list">
				<view v-for="(coupon, index) in couponList" :key="index" class="coupon-card">
					<!-- 优惠券背景图片 -->
					<image src="/static/images/xtx/领券中心.png" class="coupon-bg" mode="aspectFill" />

					<!-- 优惠券内容 -->
					<view class="coupon-content">
						<!-- 左侧金额区域 -->
						<view class="coupon-amount">
							<text class="amount-symbol">¥</text>
							<text class="amount-value">{{ coupon.amount }}</text>
						</view>

						<!-- 右侧信息区域 -->
						<view class="coupon-info">
							<text class="usage-condition">{{ coupon.condition }}</text>
							<text class="usage-limit">{{ coupon.limit }}</text>
							<text class="validity-period">{{ coupon.validity }}</text>
						</view>

						<!-- 领取按钮 -->
						<button class="claim-btn" :class="{ 'claimed': coupon.isClaimed }" @click="claimCoupon(index)"
							:disabled="coupon.isClaimed">
							{{ coupon.isClaimed ? '已领取' : '领取' }}
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 优惠券列表
				couponList: [{
						id: 1,
						amount: 10,
						condition: '满200元可用',
						limit: '仅限于XX加油站使用',
						validity: '2020.04.11—2023.05.11',
						isClaimed: false
					},
					{
						id: 2,
						amount: 10,
						condition: '满200元可用',
						limit: '仅限于XX加油站使用',
						validity: '2020.04.11—2023.05.11',
						isClaimed: true
					},
					{
						id: 3,
						amount: 30,
						condition: '满500元可用',
						limit: '仅限于XX加油站使用',
						validity: '2020.04.11—2023.05.11',
						isClaimed: false
					},
					{
						id: 4,
						amount: 80,
						condition: '满1000元可用',
						limit: '仅限于XX加油站使用',
						validity: '2020.04.11—2023.05.11',
						isClaimed: false
					}
				]
			}
		},
		onLoad() {
			this.loadCouponData();
		},
		methods: {
			// 加载优惠券数据
			loadCouponData() {
				// 这里应该调用接口获取优惠券数据
				// 暂时使用模拟数据
			},

			// 领取优惠券
			claimCoupon(index) {
				const coupon = this.couponList[index];

				if (coupon.isClaimed) {
					uni.showToast({
						title: '该优惠券已领取',
						icon: 'none'
					});
					return;
				}

				// 显示确认对话框
				uni.showModal({
					title: '确认领取',
					content: `确定要领取这张${coupon.amount}元优惠券吗？`,
					success: (res) => {
						if (res.confirm) {
							// 更新优惠券状态
							this.couponList[index].isClaimed = true;

							uni.showToast({
								title: '领取成功',
								icon: 'success'
							});

							// 这里可以调用接口更新服务器状态
							this.updateCouponStatus(coupon.id, true);
						}
					}
				});
			},

			// 更新优惠券状态（调用接口）
			updateCouponStatus(couponId, isClaimed) {
				// 这里应该调用接口更新优惠券状态
				console.log(`更新优惠券${couponId}状态为${isClaimed ? '已领取' : '未领取'}`);
			}
		}
	}
</script>

<style scoped>
	.page-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 蓝色背景区域 */
	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background: linear-gradient(135deg, #3385fd 0%, #3385fd 100%);
		z-index: 1;
	}

	/* 悬浮内容区域 */
	.content-container {
		position: absolute;
		top: 20rpx;
		left: 2%;
		right: 2%;
		width: 88%;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		z-index: 2;
		padding: 40rpx 30rpx;
		min-height: 600rpx;
	}

	/* 优惠券列表 */
	.coupon-list {
		width: 100%;
	}

	/* 优惠券卡片 */
	.coupon-card {
		position: relative;
		margin-bottom: 30rpx;
		height: 230rpx;
		border-radius: 18rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	/* 优惠券背景图片 */
	.coupon-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	/* 优惠券内容 */
	.coupon-content {
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx 30rpx 45rpx;
		position: relative;
		z-index: 2;
		
	}

	/* 左侧金额区域 */
	.coupon-amount {
		display: flex;
		align-items: baseline;
		margin-right: 30rpx;
		
	}

	.amount-symbol {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: bold;
		margin-right: 4rpx;
		text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
		margin-left: -10rpx;
	}

	.amount-value {
		font-size: 76rpx;
		color: #ffffff;
		font-weight: bold;
		line-height: 1;
		text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
	}

	/* 右侧信息区域 */
	.coupon-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		
		margin-left: 35rpx;
		
	}

	.usage-condition {
		font-size: 34rpx;
		color: #FF8B65;
		font-weight: 900;
		margin-bottom: 8rpx;
		text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
	}

	.usage-limit {
		font-size: 24rpx;
		color: #000000;
		margin-bottom: 50rpx;
		font-size: 700;
		text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
	}

	.validity-period {
		font-size: 24rpx;
		color: #999999;
		text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
	}

	/* 领取按钮 */
	.claim-btn {
		width: 140rpx;
		height: 58rpx;
		background: linear-gradient(135deg, #FF8A65 0%, #FF5722 100%);
		margin-top: 5rpx;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #ffffff;
		font-weight: 500;
		position: relative;
		z-index: 3;
	}

	.claim-btn.claimed {
		background: #cccccc;
		
		color: #ffffff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.claim-btn:not(.claimed):active {
		transform: scale(0.95);
		opacity: 0.8;
	}
</style>